<template>
	<view>
		<view class="Box" @click="onPlate">
			<view class="item">{{plateNo[0]}}</view>
			<view class="item">{{plateNo[1]}}</view>
			<view class="item">{{plateNo[2]}}</view>
			<view class="item">{{plateNo[3]}}</view>
			<view class="item">{{plateNo[4]}}</view>
			<view class="item">{{plateNo[5]}}</view>
			<view class="item">{{plateNo[6]}}</view>
			<view :class="plateNo.length > 7 ? 'item' : 'item electricity'">{{plateNo.length > 7 ? plateNo[7] : '新能源'}}
			</view>
		</view>
		<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow=false"></plate-input>
	</view>
</template>

<script>
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue'
	export default {
		components: {
			plateInput
		},
		data() {
			return {
				plateShow: false,
				plateNo: ''
			}
		},
		methods: {
			setPlate(e) {
				this.plateNo = e
				this.plateShow = false
				this.$emit('setPlate', e)
			},
			onPlate() {
				console.log(123);
				this.plateShow = true
			}
		}
	}
	// import { ref } from 'vue'
	// import plateInput from '@/components/uni-plate-input/uni-plate-input.vue'

	// const plateShow = ref(false)
	// const plateNo = ref('')

	// const setPlate = (e) => { 
	// 	plateNo.value = e
	// 	plateShow.value = false
	// }
</script>

<style lang="scss">
	.Box {
		display: flex;
		justify-content: space-evenly;
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 16rpx;
	}

	.item {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		background: rgba(247, 247, 247, 1);

		font-size: 48rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: rgba(0, 0, 0, 1);
		text-align: center;
	}

	.electricity {
		font-size: 20rpx;
		font-weight: 400;
		line-height: 80rpx;
		color: rgba(166, 166, 166, 1);
		text-align: center;
	}
</style>
